<template>
  <div class="app-wrapper">
<!--    <Webgl />-->
    <Logo />
    <BootomMenu />
    <Window />
    <!-- 今日统计 -->
    <TodayStatistics />
    <!-- 确定弹出， 不要关闭 -->
    <ConformDialog />
    <!-- 修改密码弹窗 -->
    <EditPasDialog />
    <!-- 抽屉弹窗 -->
    <DrawerDialog />
    <!-- 用户编辑窗口 -->
    <UsersDialog />
    <!-- 角色编辑窗口-->
    <RolesDialog />
    <!-- 视频浏览窗口 -->
    <PrewVideoDialog />

    <!-- excel 下载组件 -->
    <Downloader />
  </div>
</template>

<script>

import Webgl from './webgl/Webgl'
import Logo from './logo/index'
import Window from './test/window'
import ConformDialog from './dialog/conformDialog'
import EditPasDialog from './dialog/editPasDialog'
import UsersDialog from './dialog/usersDialog'
import RolesDialog from './dialog/rolesDialog'
import PrewVideoDialog from './dialog/prewVideoDialog'
import BootomMenu from '@/views/index/bootomMenu/index'
import TodayStatistics from '@/views/index/todayStatistics/index'
import DrawerDialog from '@/views/index/drawer/drawerDialog/index'
export default {
  name: 'Layout',
  components: {
    TodayStatistics,
    // Webgl,
    Logo,
    Window,
    BootomMenu,
    ConformDialog,
    EditPasDialog,
    DrawerDialog,
    UsersDialog,
    RolesDialog,
    PrewVideoDialog
  },
  mixins: [],
  data() {
    return {
      component: [''],
      drawer: false
    }
  },
  mounted() {
    // this.$store.dispatch('window/addTabItem', {
    //   title: '权限管理',
    //   component: 'Permission',
    //   data: {
    //     test: ''
    //   }
    // })
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}
</style>
